<template>
  <div class="home">
    <header class="home-header wrap" :class="{'active' : headerScroll}">
      <router-link tag="i" to="./category"><van-icon name="apps-o" /></router-link>
      <div class="header-search">
        <span class="app-name">vue3商城</span>
        <van-icon name="search" />
        <router-link tag="span" class="search-title" to="./product-list?from=home">搜索商品</router-link>
      </div>
      <router-link class="login" tag="span" to="./login" v-if="!isLogin">登录</router-link>
      <router-link class="login" tag="span" to="./user" v-else>
        <van-icon name="manager-o" />
      </router-link>
    </header>
    <nav-bar />
    <swiper :list="swiperList"></swiper>
    <category-list />

    <good-box name="新品上线" :list="newGoodses" :loading="loading"/>
    <good-box name="热门商品" :list="hots" :loading="loading"/>
    <div :style="{ paddingBottom: '100px'}">
      <good-box name="最新推荐" :list="recommends" :loading="loading"/>
    </div>
   
  </div>
</template>

<script>
// @ is an alias to /src
import navBar from '@/components/NavBar'
import swiper from '@/components/Swiper'
import categoryList from '@/components/CategoryList'
import goodBox from '@/components/GoodBox'
import { reactive, toRefs, onMounted } from 'vue';
import { getHome } from '@/service/home';
import { getLocal } from '@/common/js/utils'
import { Toast } from 'vant'

export default {
  name: 'Home',
  components: {
    navBar,
    swiper,
    categoryList,
    goodBox
  },
  setup(){
    const state = reactive({
      swiperList: [], // 轮播图列表
      isLoigin:false,
      newGoodses:[],
      hots:[],
      recommends:[],
      loading:true
      
    })
    onMounted(async()=>{
      const token = getLocal('token');
      if(token){state.isLoigin = true}
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      const { data } = await getHome()
      state.swiperList = data.carousels;
      state.newGoodses = data.newGoodses;
      state.hots = data.hotGoodses;
      state.recommends = data.recommendGoodses;
      state.loading = false;
      Toast.clear()
    })
   
    return{
      ...toRefs(state),
    }
  }
  
}
</script>
<style lang="scss" scoped>
@import '../common/style/mixin';
.home-header{
  position: fixed;
  align-items: center;
  left: 0;
  top: 0;
  @include wh(100%,50px);
  @include fj();
  line-height: 50px;
  padding: 0 15px;
  @include boxSizing();
  font-size: 15px;
  color: #fff;
  z-index: 10000;
  .nbmenu2 {
    color: $primary;
  }
  &.active {
    background: $primary;
    .nbmenu2 {
      color: #fff;
    }
    .login {
      color: #fff;
    }
  }
  .header-search {
    display: flex;
    align-items: center;
    @include wh(74%, 20px);
    line-height: 20px;
    margin: 10px 0;
    padding: 5px 0;
    color: #232326;
    background: rgba(255, 255, 255, .7);
    border-radius: 20px;
    .app-name {
      padding: 0 10px;
      color: $primary;
      font-size: 20px;
      font-weight: bold;
      border-right: 1px solid #666;
    }
    .icon-search {
      padding: 0 10px;
      font-size: 17px;
    }
    .search-title {
      font-size: 12px;
      color: #666;
      line-height: 21px;
    }
  }
  .icon-iconyonghu{
    color: #fff;
    font-size: 22px;
  }
  .login {
    color: $primary;
    line-height: 52px;
    .van-icon-manager-o {
      font-size: 20px;
      vertical-align: -3px;
    }
  }
}

</style>
